<template>
    <div id='main' style="width: 100%;height:600px;">
    </div>
</template>

<script>
    import {getEcharts} from "../../../utils/apis";
    import * as echarts from 'echarts';

    export default {
        name: "Echarts",
        data() {
            return {
                list: []
            }
        },
        mounted() {
            this.getEchartsDate();
        },
        methods: {
            getEchartsDate() {
                getEcharts().then(res => {
                    this.list = res.data
                    let d1 = []
                    let d2 = []
                    console.log(res.data)
                    for (let i=0;i<res.data.length;i++){
                        d1.push(res.data[i].amount)
                        d2.push(res.data[i].name)
                    }
                    console.log(d1)
                    console.log(d2)
                    this.drawLine(d1,d2);
                })
            },
            drawLine(d1,d2) {
                // 基于准备好的dom，初始化echarts实例
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                // 绘制图表
                var option;

                option = {
                    xAxis: {
                        type: 'category',
                        data: d2
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: d1,
                            type: 'line'
                        }
                    ]
                };

                option && myChart.setOption(option);
            }

        }
    }
</script>

<style scoped>

</style>
